import theme from "@/theme";
import { tokenStorage } from "@/utils/storage";
import { history } from "@umijs/max";
import { setUserInfo } from "@/utils/tracker";

export const palabora = (start: HTMLElement, end: HTMLElement) => {
  return new Promise<void>(resolve => {
    // 获取点击添加事件（x，y）轴位置（使用 ref 获取标签）
    const x = start.getBoundingClientRect().x;
    const y = start.getBoundingClientRect().y;
    // 获取动画结束时的位置（使用 ref 获取标签）
    const x2 = end.getBoundingClientRect().x;
    const y2 = end.getBoundingClientRect().y;

    // 新建一个 div 标签
    const bar = document.createElement("div");
    // 给新建标签添加 style 样式
    bar.style.position = "fixed";
    // 位置
    bar.style.left = x + "px";
    bar.style.top = y + "px";
    // 宽高
    bar.style.width = 10 + "px";
    bar.style.height = 10 + "px";
    // 圆角
    bar.style.borderRadius = "50%";
    // 背景色
    bar.style.backgroundColor = theme.primary;
    // 动画执行效果
    bar.style.transition = "left .5s linear, top .5s cubic-bezier(0.5, -0.5, 1, 1)";
    // 追加至 body 中
    document.body.appendChild(bar);

    // 添加动画属性;
    setTimeout(() => {
      // 结束时位置
      bar.style.left = x2 + "px";
      bar.style.top = y2 + "px";
    }, 0);

    // 动画执行完成后删除
    bar.ontransitionend = function () {
      bar.remove();
      resolve();
    };
  })
}

export const logout = () => {
  tokenStorage.remove();
  window.__mutateUserInfo?.(undefined);
  setUserInfo(undefined);
  history.push('/home');
}

export const getId = () => {
  return Math.random().toString();
}